
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
	  xmlns:social="https://spring.io/springsocial"
	  xmlns:layout="https://github.com/ultraq/thymeleaf-layout-dialect"
	  xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="icon" href="../../favicon.ico"/>

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}" rel="stylesheet"/>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link th:href="@{/webjars/bootstrap/3.3.6/css/ie10-viewport-bug-workaround.css}" rel="stylesheet"/>

    <!-- Custom styles for this template -->
    <link th:href="@{/showcase.css}" rel="stylesheet"/>

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script th:src="@{/webjars/bootstrap/3.3.6/js/ie-emulation-modes-warning.js}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/}">Spring Social Showcase</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a th:href="@{/}">Home</a></li>
              <li class="dropdown" sec:authorize="isAuthenticated()"><a th:href="@{/connect}">Connections</a></li>
              <li class="dropdown" sec:authorize="isAuthenticated()">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Facebook <span class="caret"></span></a>
                <ul class="dropdown-menu">
                	<li><a th:href="@{/connect/facebook}">Connection</a></li>
	  				<li social:connected="facebook"><a th:href="@{/facebook}">Facebook Profile</a></li>
					<li social:connected="facebook"><a th:href="@{/facebook/feed}">Feed</a></li>
					<li social:connected="facebook"><a th:href="@{/facebook/friends}">Friends</a></li>
					<li social:connected="facebook"><a th:href="@{/facebook/albums}">Albums</a></li>
                </ul>
              </li>
              <li class="dropdown" sec:authorize="isAuthenticated()">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Twitter <span class="caret"></span></a>
                <ul class="dropdown-menu">
                	<li><a th:href="@{/connect/twitter}">Connection</a></li>
					<li social:connected="twitter"><a th:href="@{/twitter}">Twitter Profile</a></li>
					<li social:connected="twitter"><a th:href="@{/twitter/timeline}">Timeline</a></li>
					<li social:connected="twitter"><a th:href="@{/twitter/friends}">Friends</a></li>
					<li social:connected="twitter"><a th:href="@{/twitter/followers}">Followers</a></li>
					<li social:connected="twitter"><a th:href="@{/twitter/trends}">Trends</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li sec:authorize="!isAuthenticated()"><a th:href="@{/signin}">Sign In</a></li>
              <li sec:authorize="isAuthenticated()"><a href="javascript:document.logoutForm.submit();">Sign out <span sec:authentication="name">Bob</span></a></li>
            </ul>
            <form method="POST" th:action="@{/signout}" name="logoutForm"></form>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

	  <div id="content" layout:fragment="content">
		Content goes here
	  </div>	

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
    <!-- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> -->
    <script th:src="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script th:src="@{/webjars/bootstrap/3.3.6/js/ie10-viewport-bug-workaround.js}"></script>
  </body>
</html>
